<template>
<div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="产品名称">
      <el-input v-model="formInline.productName" placeholder="产品名称"></el-input>
    </el-form-item>
    <el-form-item label="时间">
      <el-date-picker
          v-model="formInline.createTimes"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="list">查询</el-button>
    </el-form-item>
  </el-form>
  <el-upload
      class="upload-demo"
      drag
      action="http://localhost:8100/service/retail/import"
      multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
  <el-button @click="add" type="primary" size="small">添加</el-button>
  <el-button @click="excel" type="primary" size="small">导出</el-button>
  <el-button @click="gettu" type="primary" size="small">生成报表</el-button>
  <el-table
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        fixed
        prop="shopId"
        label="编号"
        width="150">
    </el-table-column>
    <el-table-column
        label="地区"
        width="120">
      <template v-slot="r">
        {{r.row.provinceName}} -- {{r.row.cityName}} -- {{r.row.districtName}}
      </template>
    </el-table-column>
    <el-table-column
        prop="num"
        label="数量"
        width="120">
    </el-table-column>
    <el-table-column
        prop="yphone"
        label="手机号"
        width="120">
    </el-table-column>
    <el-table-column
        label="图片"
        width="120">
      <template v-slot="scope">
        <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.avatar"></el-image>
      </template>
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="创建时间"
        width="120">
    </el-table-column>
    <el-table-column
        prop="productName"
        label="收购公司"
        width="300">
    </el-table-column>
    <el-table-column
        prop="remark"
        label="代言人"
        width="120">
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button @click="update(scope.row)" type="text" size="small">修改</el-button>
        <el-button @click="del(scope.row.shopId)" type="text" size="small">删除</el-button>
        <el-button @click="ById(scope.row.bid)" type="text" size="small">生成天气</el-button>
        <el-button @click="tocity(scope.row.shopId)" type="text" size="small">展示天气</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      @current-change="toPage"
      :current-page="page"
      :page-sizes="[3, 6, 7, 9]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
  </el-pagination>
  <el-dialog title="展示天气" :visible.sync="dialogTableVisible">
    <el-table :data="gridData">
      <el-table-column property="city" label="城市" width="200"></el-table-column>
      <el-table-column property="weather" label="天气" width="200"></el-table-column>
      <el-table-column property="temperature" label="温度" width="200"></el-table-column>
      <el-table-column property="humidness" label="湿度" width="200"></el-table-column>
      <el-table-column property="windDirection" label="风向" width="200"></el-table-column>
      <el-table-column property="windForce" label="风力" width="200"></el-table-column>
      <el-table-column property="airQuality" label="空气质量" width="200"></el-table-column>
    </el-table>

  </el-dialog>

  <el-dialog title="添加" :visible.sync="dialogFormVisible">

    <el-form v-loading="loadFlag" :model="form">
      <el-form-item label="选择上传图片的类型">
      <el-select v-model="form.picType" placeholder="请选择">
        <el-option label="营业执照" value="businessLicense"></el-option>
        <el-option label="驾驶证" value="driverLicense"></el-option>
        <el-option label="身份证" value="idCard"></el-option>
      </el-select>
    </el-form-item>
       <el-form-item label="数量" :label-width="formLabelWidth">
        <el-input v-model="form.num" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号" :label-width="formLabelWidth">
        <el-input v-model="form.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="省/市/区" :label-width="formLabelWidth">
        <el-cascader
            v-model="cityIds"
            :options="options"
            :props="props"
            @change="handleChange"
             clearable>
        </el-cascader>
      </el-form-item>
      <el-form-item label="图片" :label-width="formLabelWidth">
        <el-upload
            class="avatar-uploader"
            action="http://localhost:8100/service/retail/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="收购公司" :label-width="formLabelWidth">
        <el-input v-model="form.productName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="代言人" :label-width="formLabelWidth">
        <el-input v-model="form.remark" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="toadd">确 定</el-button>
    </div>
  </el-dialog>
  <el-dialog title="修改" :visible.sync="dialogFormVisible1">
    <el-form :model="user">
      <el-form-item label="数量" :label-width="formLabelWidth">
        <el-input v-model="user.num" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号" :label-width="formLabelWidth">
        <el-input v-model="user.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="省/市/区" :label-width="formLabelWidth">
        <el-cascader
            v-model="cityIds"
            :options="options"
            :props="props"
            @change="handleChange1"
            clearable>
        </el-cascader>
      </el-form-item>
      <el-form-item label="图片" :label-width="formLabelWidth">
        <el-upload
            class="avatar-uploader"
            action="http://localhost:8100/service/retail/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="产品名称" :label-width="formLabelWidth">
        <el-input v-model="user.productName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="user.remark" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible1 = false">取 消</el-button>
      <el-button type="primary" @click="toupdate">确 定</el-button>
    </div>
  </el-dialog>
  <div>
    <div id="main" style="height: 300px;width: 500px"></div>
  </div>
</div>
</template>

<script>

export default {
  name: "retailView",
  data(){
    return{
      formInline:{},
      gridData:[],
      props: {
        value: 'id',
        label: 'name',
        children: 'children'
      },
      cityIds:["","",""],
      tableData:[],
      rzt:[],
      page:1,
      size:3,
      total:0,
      dialogFormVisible:false,
      dialogFormVisible1:false,
      dialogTableVisible:false,
      form:{},
      user:{},
      options:[],
      imageUrl:'',
      picType:'',
      loadFlag:false,
      formLabelWidth:'120px',
    }
  },methods:{

    tocity(shopId){
      this.tianqi(shopId)
      this.dialogTableVisible=true;

    },
    tianqi(shopId){
      this.axios.post("service/retail/cidBy?id="+shopId).then(r=>{
        this.gridData=r.data.data;
      })
    },
    ById(bid){
      this.axios.post("service/retail/byId?id="+bid).then(()=>{
      this.$message.success("添加成功");
      })
    },

    gettu(){
  this.axios.post("service/retail/getTu").then(r=>{
  this.rzt=r.data;
  let xDate=[];
  let yDate=[];
  this.rzt.forEach(item=>{
    xDate.push(item.xzhou);
    yDate.push(item.yzhou);
    console.log(this.x);
    console.log(this.y);
  });
this.x=xDate;
this.y=yDate;
var echars=require('echarts');
    var cahrDom =document.getElementById('main');
    var myChar=echars.init(cahrDom);
    var option;

    option = {
      xAxis: {
        type: 'category',
        data: this.x,
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: this.y,
          type: 'bar'
        }
      ]
    };
    console.log(this.x);
    console.log(this.y);
    option && myChar.setOption(option);

  })
    },
    excel(){
      window.location.href=this.axios.defaults.baseURL+"service/retail/excel";
    },
    handleChange1(id){
      console.log(id);
      if(id.length>0){
        this.user.aid=id[0];
        this.user.bid=id[1];
        this.user.cid=id[2];
      }else {
        this.user.aid='';
      }
    },
    del(id){
      this.axios.post("service/retail/delete?id="+id).then(r=>{
        if(r.data.code==200){
          this.$message.success("删除成功");
          this.list();
        }else {
          this.$message.error(r.data.msg);
        }
      })
    },
    toupdate(){
      this.axios.post("service/retail/update",this.user).then(r=>{
        if(r.data.code==200){
          this.$message.success("修改成功");
          this.dialogFormVisible1=false;
          this.list();
        }else {
          this.$message.error(r.data.msg);
        }
      })
    },
    update(row){
      console.log(row.aid);
      this.cityIds=[];
      this.dialogFormVisible1=true;
      this.user=row;
      this.imageUrl=row.avatar;
      if(row.aid){
        this.cityIds.push(row.aid,row.bid,row.cid);
      }
      console.log(this.cityIds)
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.picScan(res);
      this.form.avatar=res;
    },
    async picScan(res1){
      this.picType=this.form.picType;
      this.axios.post("service/retail/getName?picType="+this.picType+"&filepath="+res1).then(r=>{
        console.log(r.data.name);
        this.form.productName=r.data.name;
        this.form.remark=r.data.name1;
        if(this.form.remark!=null&& this.form.remark!="" && this.form.productName!=null &&this.form.productName!=""){
          this.loadFlag=true;
          setTimeout(()=>{
            this.loadFlag=false;
          },500);
        }
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleChange(id){
      console.log(id);
      if(id.length>0){
        this.form.aid=id[0];
        this.form.bid=id[1];
        this.form.cid=id[2];
      }else {
        this.form.aid='';
      }
    },
    getTree(){
      this.axios.post("service/retail/getTree").then(r=>{
        this.options=r.data.data;
      })
    },
    add(){
      this.form={};
      this.form.aid="";
      this.imageUrl="";
      this.dialogFormVisible=true;
    },

    toadd(){
      this.axios.post("service/retail/add",this.form).then(r=>{
        if(r.data.code==200){
          this.$message.success("添加成功");
          this.dialogFormVisible=false;
          this.list();
        }else {
          this.$message.error(r.data.msg);
        }
      })
    },
    toPage(page){
      this.page=page;
      this.list();
    },
    list(){
      this.axios.post("service/retail/list?pageNum="+this.page+"&pageSize="+this.size,this.formInline).then(r=>{
      this.tableData=r.data.data.list;
      this.total=r.data.data.total;
      })
    }
  },created() {
    this.list();
    this.getTree();
    this.tianqi();
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
